<template>
  <div class="chat-container">
    <header class="chat-header">
      <div class="top-bar">
        <div class="logo-container">
          <img src="./assets/logoblack.png" alt="Logo" class="logo" />
        </div>
        <div class="role-info" style="color: white;">
          {{ "The current model is:" + roleUsed }}
        </div>
      </div>
    </header>

    <div class="messages" ref="messagesContainer">
      <div
          v-for="(msg, index) in messages"
          :key="index"
          :class="['message', msg.from]"
      >
        <img v-if="msg.from === 'user'" src="./assets/user.png" alt="用户头像" class="avatar user-avatar" />
        <div class="message-content user-message" v-if="msg.from === 'user'">{{ msg.text }}</div>

        <div class="message-content ai-message" v-if="msg.from === 'ai'" v-html="renderMarkdown(msg.text)"></div>
        <img v-if="msg.from === 'ai'" src="./assets/ai.png" alt="AI头像" class="avatar ai-avatar" />
      </div>
    </div>

    <div class="input-container" style="color: white;">
      <input
          v-model="userInput"
          @keyup.enter="sendMessage"
          placeholder="send message to ABEL Ai..."
      />
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { marked } from 'marked'; // 引入 marked 库

const messages = ref([]);
const userInput = ref('');
const messagesContainer = ref(null);
const roleUsed = ref('');

// 发送消息函数
const sendMessage = async () => {
  if (!userInput.value.trim()) return;

  messages.value.push({ from: 'user', text: userInput.value });

  const input = userInput.value;
  userInput.value = '';

  await scrollToBottom();

  const response = await fetchAIResponse(input);

  if (response.error) {
    messages.value.push({ from: 'ai', text: response.error });
  } else {
    let messageText = '';

    // 渲染天数内容
    if (response.days && Array.isArray(response.days)) {
      response.days.forEach((day) => {
        // 处理每段文字，使其第一个词被加粗
        const paragraphs = day.text.split('\n').map(paragraph => {
          // 去除多余的 *
          const cleanedParagraph = paragraph.replace(/\*+/g, '');

          const parts = cleanedParagraph.split(' ');
          if (parts.length > 1) {
            const firstWord = parts[0];
            const restText = parts.slice(1).join(' ');
            return `<span style="font-weight: bold;">${firstWord}</span> ${restText}`;
          } else {
            return cleanedParagraph;
          }
        }).join('<br>'); // 用 <br> 分隔段落

        messageText += `<p>${paragraphs}</p>`; // 用 <p> 包裹每个天数的文本

        if (day.image) {
          messageText += `<img src="data:image/jpeg;base64,${day.image}" alt="生成的图像" style="width: 400px; height: 400px; margin-top: 10px;" />`;
        }
      });
    } else {
      // 去除多余的 *
      messageText = (response.result || "没有返回回复").replace(/\*+/g, "");
    }

    // 添加音频播放按钮
    if (response.result_audio_base64) {
      messageText += `
        <br>
        <button style="margin-top: 10px; background-color: transparent; color: #2386EB; border: none; padding: 8px 16px; cursor: pointer; display: none;">
            这个按钮不可见
        </button>
        <audio id="audioPlayer" src="data:audio/mp3;base64,${response.result_audio_base64}" type="audio/mp3" controls></audio>
        <br>
        <img src="/src/assets/flow.png" alt="流程图" style="width: 1000px; height: 400px; margin-top: 10px;" />
      `;
    }

    messages.value.push({ from: 'ai', text: messageText });

    // 显示角色信息
    if (response.role_used) {
      roleUsed.value = response.role_used;
    }
  }

  await scrollToBottom();
};

// 播放音频函数
function playAudio() {
  const audioPlayer = document.getElementById("audioPlayer");
  if (audioPlayer) {
    audioPlayer.play().catch(error => {
      console.log("播放失败:", error);
    });
  }
}

// 渲染 Markdown
const renderMarkdown = (text) => {
  return marked.parse(text);
};

// 调用 AI 接口
const fetchAIResponse = async (input) => {
  try {
    const response = await fetch("http://localhost:5000/api", {
      method: "POST",
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ query: input })
    });

    if (!response.ok) {
      throw new Error("网络响应失败");
    }

    const responseJson = await response.json();
    return responseJson;
  } catch (error) {
    console.error("请求错误:", error.message || error);
    return { error: "请求错误!" };
  }
};

// 滚动到最新消息
const scrollToBottom = async () => {
  await nextTick();
  messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
};

onMounted(scrollToBottom);
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Arvo', serif; /* 使用 Arvo 字体 */
}

.top-bar {
  display: flex;
  justify-content: space-between; /* 子元素之间留有空间 */
  align-items: center;            /* 垂直居中 */
  width: 100%;                    /* 使容器宽度为100% */
  height: 30px;                   /* 设置顶部栏的高度 */
  background-color: #000000;         /* 背景颜色 */
  padding: 0 1rem;                /* 容器内边距 */
}

.logo-container {
  flex: 1;                        /* 使 logo 容器占据剩余空间的中心 */
  text-align: center;
  margin-left: 400px;/* 图片水平居中 */
}

.logo {
  max-width: 100%;                /* 确保图片不会超出容器宽度 */
  height: auto;                   /* 保持图片的宽高比 */
}

.role-info {
  flex: 1;                        /* 使 role-info 容器占据剩余空间 */
  text-align: right;              /* 文字靠右对齐 */
  color: white;                   /* 文字颜色为白色 */
  padding-left: 2rem;             /* 左边距，防止文字紧贴图片 */
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 900px; /* 固定高度 */
  width: 1700px; /* 固定宽度 */
  margin: auto; /* 水平居中 */
  margin-left: -225px;
  background-color: #f5f5f5; /* 浅灰色背景 */
  border: 1px solid #e0e0e0;
}

/* 顶部标题样式 */
.chat-header {
  background-color: #000000; /* 白色 */
  color: #333;
  text-align: center;
  padding: 1rem;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
}

/* 消息显示区域样式 */
.messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background-color: #000000; /* 黑色背景 */
  border-radius: 0 0 8px 8px;
}

/* 消息气泡样式 */
.message {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
  margin-bottom: 1rem; /* 增加间距 */
}

.user {
  display: flex;
  flex-direction: row-reverse; /* 用户消息和头像靠右 */
  align-items: flex-start;
}

.user .message-content {
  margin-right: 5px; /* 用户消息与头像的间距 */
  background-color: #6869FF; /* 用户消息绿色 */
  color: white; /* 字体颜色 */
  border-radius: 20px; /* 圆角 */
  padding: 10px 15px; /* 内边距 */
  max-width: 70%; /* 最大宽度 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.chat-header {
  display: flex; /* 使用 Flexbox */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  padding: 1rem; /* 适当的内边距 */
}



.logo {
  height: auto; /* 让 logo 高度自适应 */
  max-height: 40px; /* 根据需要调整最大高度 */
  margin-right: 10px; /* 添加右边距 */
}

.ai {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start; /* AI消息和头像靠左 */
}

.user .avatar {
  margin-left: 0px; /* 用户头像与消息气泡的间距 */
}

.ai .message-content {
  margin-left: 5px; /* AI消息与头像的间距 */
  background-color: #000000; /* AI 消息颜色 */
  color: white;
  border-radius: 20px; /* 圆角 */
  padding: 10px 15px; /* 内边距 */
  margin-right: auto;
  max-width: 70%; /* 最大宽度 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.ai .avatar {
  margin-left: 0px; /* 用户头像与消息气泡的间距 */
}

/* 头像样式 */
.avatar {
  width: 40px; /* 头像宽度 */
  height: 40px; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
}

/* 输入区域样式 */
.input-container {
  display: flex;
  padding: 1rem;
  border-top: 1px solid #e0e0e0;
  background-color: #000000; /* 黑色背景 */
  color: white;
}

/* 设置输入框占位符的文字颜色 */
.input-container input::placeholder {
  color: white;
}

.input-container input {
  flex: 1; /* 输入框占据剩余空间 */
  padding: 10px;
  color: white; /* 输入框内的文字颜色为白色 */
  background-color: #000000; /* 输入框的背景颜色为黑色 */
  border: 1px solid #e0e0e0;
  border-radius: 4px; /* 圆角 */
  margin-right: 10px; /* 右边距 */
}

/* 按钮样式 */
.input-container button {
  background-color: #2386EB; /* 按钮颜色 */
  color: white; /* 字体颜色 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 15px; /* 内边距 */
  cursor: pointer; /* 鼠标悬停效果 */
}
</style>
<!--<template>-->
<!--  <div class="chat-container">-->
<!--    <header class="chat-header">-->
<!--      <div class="top-bar">-->
<!--        <div class="logo-container">-->
<!--          <img src="./assets/logoblack.png" alt="Logo" class="logo" />-->
<!--        </div>-->
<!--        <div class="role-info" style="color: white;">-->
<!--          {{ "The current model is:" + roleUsed }}-->
<!--        </div>-->
<!--      </div>-->
<!--    </header>-->

<!--    <div class="messages" ref="messagesContainer">-->
<!--      <div-->
<!--          v-for="(msg, index) in messages"-->
<!--          :key="index"-->
<!--          :class="['message', msg.from]"-->
<!--      >-->
<!--        <img v-if="msg.from === 'user'" src="./assets/user.png" alt="用户头像" class="avatar user-avatar" />-->
<!--        <div class="message-content user-message" v-if="msg.from === 'user'">{{ msg.text }}</div>-->

<!--        <div class="message-content ai-message" v-if="msg.from === 'ai'" v-html="renderMarkdown(msg.text)"></div>-->
<!--        <img v-if="msg.from === 'ai'" src="./assets/ai.png" alt="AI头像" class="avatar ai-avatar" />-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="input-container" style="color: white;">-->
<!--      <input-->
<!--          v-model="userInput"-->
<!--          @keyup.enter="sendMessage"-->
<!--          placeholder="send message to ABEL Ai..."-->
<!--      />-->
<!--      <button @click="sendMessage">Send</button>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted, nextTick } from 'vue';-->
<!--import { marked } from 'marked'; // 引入 marked 库-->

<!--const messages = ref([]);-->
<!--const userInput = ref('');-->
<!--const messagesContainer = ref(null);-->
<!--const roleUsed = ref('');-->

<!--// 发送消息函数-->
<!--const sendMessage = async () => {-->
<!--  if (!userInput.value.trim()) return;-->

<!--  messages.value.push({ from: 'user', text: userInput.value });-->

<!--  const input = userInput.value;-->
<!--  userInput.value = '';-->

<!--  await scrollToBottom();-->

<!--  const response = await fetchAIResponse(input);-->

<!--  if (response.error) {-->
<!--    messages.value.push({ from: 'ai', text: response.error });-->
<!--  } else {-->
<!--    let messageText = '';-->

<!--    // 渲染天数内容-->
<!--    if (response.days && Array.isArray(response.days)) {-->
<!--      response.days.forEach((day) => {-->
<!--        // 处理每段文字，使其第一个词被加粗-->
<!--        const paragraphs = day.text.split('\n').map(paragraph => {-->
<!--          // 去除多余的 *-->
<!--          const cleanedParagraph = paragraph.replace(/\*+/g, '');-->

<!--          const parts = cleanedParagraph.split(' ');-->
<!--          if (parts.length > 1) {-->
<!--            const firstWord = parts[0];-->
<!--            const restText = parts.slice(1).join(' ');-->
<!--            return `<span style="font-weight: bold;">${firstWord}</span> ${restText}`;-->
<!--          } else {-->
<!--            return cleanedParagraph;-->
<!--          }-->
<!--        }).join('<br>'); // 用 <br> 分隔段落-->

<!--        messageText += `<p>${paragraphs}</p>`; // 用 <p> 包裹每个天数的文本-->

<!--        if (day.image) {-->
<!--          messageText += `<img src="data:image/jpeg;base64,${day.image}" alt="生成的图像" style="width: 400px; height: 400px; margin-top: 10px;" />`;-->
<!--        }-->
<!--      });-->
<!--    } else {-->
<!--      // 去除多余的 *-->
<!--      messageText = (response.result || "没有返回回复").replace(/\*+/g, "");-->
<!--    }-->

<!--    // 添加音频播放按钮-->
<!--    if (response.result_audio_base64) {-->
<!--      messageText += `-->
<!--        <br>-->
<!--        <button style="margin-top: 10px; background-color: transparent; color: #2386EB; border: none; padding: 8px 16px; cursor: pointer; display: none;">-->
<!--            这个按钮不可见-->
<!--        </button>-->
<!--        <audio id="audioPlayer" src="data:audio/mp3;base64,${response.result_audio_base64}" type="audio/mp3" controls></audio>-->
<!--      `;-->
<!--    }-->

<!--    messages.value.push({ from: 'ai', text: messageText });-->

<!--    // 显示角色信息-->
<!--    if (response.role_used) {-->
<!--      roleUsed.value = response.role_used;-->
<!--    }-->
<!--  }-->

<!--  await scrollToBottom();-->
<!--};-->

<!--// 播放音频函数-->
<!--function playAudio() {-->
<!--  const audioPlayer = document.getElementById("audioPlayer");-->
<!--  if (audioPlayer) {-->
<!--    audioPlayer.play().catch(error => {-->
<!--      console.log("播放失败:", error);-->
<!--    });-->
<!--  }-->
<!--}-->

<!--// 渲染 Markdown-->
<!--const renderMarkdown = (text) => {-->
<!--  return marked.parse(text);-->
<!--};-->

<!--// 调用 AI 接口-->
<!--const fetchAIResponse = async (input) => {-->
<!--  try {-->
<!--    const response = await fetch("http://localhost:5000/api", {-->
<!--      method: "POST",-->
<!--      headers: {-->
<!--        "Accept": "application/json",-->
<!--        "Content-Type": "application/json"-->
<!--      },-->
<!--      body: JSON.stringify({query: input})-->
<!--    });-->

<!--    if (!response.ok) {-->
<!--      throw new Error("网络响应失败");-->
<!--    }-->

<!--    const responseJson = await response.json();-->
<!--    return responseJson;-->
<!--  } catch (error) {-->
<!--    console.error("请求错误:", error.message || error);-->
<!--    return {error: "请求错误!"};-->
<!--  }-->
<!--};-->

<!--// 滚动到最新消息-->
<!--const scrollToBottom = async () => {-->
<!--  await nextTick();-->
<!--  messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;-->
<!--};-->

<!--onMounted(scrollToBottom);-->
<!--</script>-->

<!--<style scoped>-->
<!--html, body {-->
<!--  height: 100%;-->
<!--  margin: 0;-->
<!--  font-family: 'Arvo', serif; /* 使用 Arvo 字体 */-->
<!--}-->

<!--.top-bar {-->
<!--  display: flex;-->
<!--  justify-content: space-between; /* 子元素之间留有空间 */-->
<!--  align-items: center; /* 垂直居中 */-->
<!--  width: 100%; /* 使容器宽度为100% */-->
<!--  height: 30px; /* 设置顶部栏的高度 */-->
<!--  background-color: #000000; /* 背景颜色 */-->
<!--  padding: 0 1rem; /* 容器内边距 */-->
<!--}-->

<!--.logo-container {-->
<!--  flex: 1; /* 使 logo 容器占据剩余空间的中心 */-->
<!--  text-align: center;-->
<!--  margin-left: 400px; /* 图片水平居中 */-->
<!--}-->

<!--.logo {-->
<!--  max-width: 100%; /* 确保图片不会超出容器宽度 */-->
<!--  height: auto; /* 保持图片的宽高比 */-->
<!--}-->

<!--.role-info {-->
<!--  flex: 1; /* 使 role-info 容器占据剩余空间 */-->
<!--  text-align: right; /* 文字靠右对齐 */-->
<!--  color: white; /* 文字颜色为白色 */-->
<!--  padding-left: 2rem; /* 左边距，防止文字紧贴图片 */-->
<!--}-->

<!--.chat-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 900px; /* 固定高度 */-->
<!--  width: 1700px; /* 固定宽度 */-->
<!--  margin: auto; /* 水平居中 */-->
<!--  margin-left: -225px;-->
<!--  background-color: #f5f5f5; /* 浅灰色背景 */-->
<!--  border: 1px solid #e0e0e0;-->
<!--}-->

<!--/* 顶部标题样式 */-->
<!--.chat-header {-->
<!--  background-color: #000000; /* 白色 */-->
<!--  color: #333;-->
<!--  text-align: center;-->
<!--  padding: 1rem;-->
<!--  font-weight: bold;-->
<!--  border-bottom: 1px solid #e0e0e0;-->
<!--}-->

<!--/* 消息显示区域样式 */-->
<!--.messages {-->
<!--  flex: 1;-->
<!--  padding: 1rem;-->
<!--  overflow-y: auto;-->
<!--  background-color: #000000; /* 黑色背景 */-->
<!--  border-radius: 0 0 8px 8px;-->
<!--}-->

<!--/* 消息气泡样式 */-->
<!--.message {-->
<!--  display: flex;-->
<!--  align-items: flex-start; /* 垂直对齐 */-->
<!--  margin-bottom: 1rem; /* 增加间距 */-->
<!--}-->

<!--.user {-->
<!--  display: flex;-->
<!--  flex-direction: row-reverse; /* 用户消息和头像靠右 */-->
<!--  align-items: flex-start;-->
<!--}-->

<!--.user .message-content {-->
<!--  margin-right: 5px; /* 用户消息与头像的间距 */-->
<!--  background-color: #6869FF; /* 用户消息绿色 */-->
<!--  color: white; /* 字体颜色 */-->
<!--  border-radius: 20px; /* 圆角 */-->
<!--  padding: 10px 15px; /* 内边距 */-->
<!--  max-width: 70%; /* 最大宽度 */-->
<!--  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--}-->

<!--.chat-header {-->
<!--  display: flex; /* 使用 Flexbox */-->
<!--  align-items: center; /* 垂直居中对齐 */-->
<!--  justify-content: center; /* 水平居中对齐 */-->
<!--  padding: 1rem; /* 适当的内边距 */-->
<!--}-->


<!--.logo {-->
<!--  height: auto; /* 让 logo 高度自适应 */-->
<!--  max-height: 40px; /* 根据需要调整最大高度 */-->
<!--  margin-right: 10px; /* 添加右边距 */-->
<!--}-->

<!--.ai {-->
<!--  display: flex;-->
<!--  flex-direction: row-reverse;-->
<!--  align-items: flex-start; /* AI消息和头像靠左 */-->
<!--}-->

<!--.user .avatar {-->
<!--  margin-left: 0px; /* 用户头像与消息气泡的间距 */-->
<!--}-->

<!--.ai .message-content {-->
<!--  margin-left: 5px; /* AI消息与头像的间距 */-->
<!--  background-color: #2386EB; /* AI 消息颜色 */-->
<!--  color: white;-->
<!--  border-radius: 20px; /* 圆角 */-->
<!--  padding: 10px 15px; /* 内边距 */-->
<!--  margin-right: auto;-->
<!--  max-width: 70%; /* 最大宽度 */-->
<!--  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--}-->

<!--.ai .avatar {-->
<!--  margin-left: 0px; /* 用户头像与消息气泡的间距 */-->
<!--}-->

<!--/* 头像样式 */-->
<!--.avatar {-->
<!--  width: 40px; /* 头像宽度 */-->
<!--  height: 40px; /* 头像高度 */-->
<!--  border-radius: 50%; /* 圆形头像 */-->
<!--}-->

<!--/* 输入区域样式 */-->
<!--.input-container {-->
<!--  display: flex;-->
<!--  padding: 1rem;-->
<!--  border-top: 1px solid #e0e0e0;-->
<!--  background-color: #000000; /* 黑色背景 */-->
<!--  color: white;-->
<!--}-->

<!--/* 设置输入框占位符的文字颜色 */-->
<!--.input-container input::placeholder {-->
<!--  color: white;-->
<!--}-->

<!--.input-container input {-->
<!--  flex: 1; /* 输入框占据剩余空间 */-->
<!--  padding: 10px;-->
<!--  color: white; /* 输入框内的文字颜色为白色 */-->
<!--  background-color: #000000; /* 输入框的背景颜色为黑色 */-->
<!--  border: 1px solid #e0e0e0;-->
<!--  border-radius: 4px; /* 圆角 */-->
<!--  margin-right: 10px; /* 右边距 */-->
<!--}-->

<!--/* 按钮样式 */-->
<!--.input-container button {-->
<!--  background-color: #2386EB; /* 按钮颜色 */-->
<!--  color: white; /* 字体颜色 */-->
<!--  border: none; /* 无边框 */-->
<!--  border-radius: 4px; /* 圆角 */-->
<!--  padding: 10px 15px; /* 内边距 */-->
<!--  cursor: pointer; /* 鼠标悬停效果 */-->
<!--}-->
<!--</style>-->